<!-- pages/scan/scan.vue -->
<template>
  <view class="scan-container">
    <!-- 全屏摄像头区域 -->
    <camera class="camera" device-position="back" flash="off" @error="error" 
            style="width: 100vw; height: 100vh;">
    </camera>
    
    <!-- 自定义扫描框 -->
    <view class="scan-mask">
      <view class="scan-frame">
        <view class="scan-line"></view>
      </view>
      <view class="scan-tips">将条码放入框内，即可自动扫描</view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="scan-actions">
      <button class="action-btn" @tap="switchFlash">
        <text class="icon">{{flashOn ? '🔦' : '💡'}}</text>
        <text>{{flashOn ? '关闭闪光灯' : '打开闪光灯'}}</text>
      </button>
      <button class="action-btn" @tap="switchCamera">
        <text class="icon">📷</text>
        <text>切换摄像头</text>
      </button>
      <button class="action-btn close-btn" @tap="closeScan">
        <text class="icon">❌</text>
        <text>关闭</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flashOn: false,
      cameraPosition: 'back',
      scanTimer: null
    };
  },
  onLoad() {
    this.startScan();
  },
  onUnload() {
    this.stopScan();
  },
  methods: {
    startScan() {
      // 使用定时器持续扫描
      this.scanTimer = setInterval(() => {
        this.scanCode();
      }, 1500);
    },
    
    stopScan() {
      if (this.scanTimer) {
        clearInterval(this.scanTimer);
        this.scanTimer = null;
      }
    },
    
    scanCode() {
      // const context = uni.createCameraContext();
      uni.scanCode({
        onlyFromCamera: true,
        scanType: ['barCode'],
        success: (res) => {
          console.log('扫描结果:', res);
          if (res.result) {
            this.stopScan();
            // 返回结果到上一个页面
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('scanSuccess', res);
            uni.navigateBack();
          }
        },
        fail: (err) => {
          console.log('扫描失败:', err);
        }
      });
    },
    
    switchFlash() {
      this.flashOn = !this.flashOn;
    },
    
    switchCamera() {
      this.cameraPosition = this.cameraPosition === 'back' ? 'front' : 'back';
    },
    
    closeScan() {
      this.stopScan();
      uni.navigateBack();
    },
    
    error(e) {
      console.log('摄像头错误:', e);
      uni.showToast({
        title: '摄像头启动失败',
        icon: 'none'
      });
    }
  }
};
</script>

<style scoped>
.scan-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

.camera {
  width: 100%;
  height: 100%;
}

.scan-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scan-frame {
  width: 60vw;
  height: 30vw;
  border: 2px solid #00ff00;
  position: relative;
  overflow: hidden;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #00ff00;
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(30vw);
  }
}

.scan-tips {
  color: #ffffff;
  margin-top: 30px;
  font-size: 14px;
}

.scan-actions {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
  box-sizing: border-box;
}

.action-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 20px;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.close-btn {
  background: rgba(255, 0, 0, 0.8);
  color: white;
}

.icon {
  font-size: 20px;
  margin-bottom: 5px;
}
</style>